<template>
    <div class="v-dropdown" :style="{ width: `${width}px`, height: `${height}px` }">
        <el-dropdown trigger="click" @command="selVal">
            <button>
        <span class="el-dropdown-link">
          {{ val || placeholder }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
            </button>
            <el-dropdown-menu slot="dropdown" :class="dropdownMenuClass">
                <el-dropdown-item v-if="showList[index]" v-for="(item, index) in options" :key="item.id"
                                  :command="item[itemKey]">
                   npm
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'v-dropdown',
        props: {
            // 宽度
            width: {
                type: Number,
                default: 100
            },
            // 高度
            height: {
                type: Number,
                default: 60
            },
            // 设置默认值的key
            value: {
                type: String,
                default: ''
            },
            // 提示语
            placeholder: {
                type: String,
                default: '请选择'
            },
            // 选项列表
            options: {
                type: Array
            },
            // 选项的key
            itemKey: {
                type: String,
                default: 'value'
            },
            // 选项的值
            itemValue: {
                type: String,
                default: 'label'
            },
            // 下拉框的class
            dropdownMenuClass: {}
        },
        data () {
            return {
                val: '',
                showList: []
            }
        },
        methods: {
            selVal (val) {
                this.options.forEach((item, index) => {
                    this.showList[index] = true
                    if (item[this.itemKey] === val) {
                        this.val = item[this.itemValue]
                        this.showList[index] = false
                        this.$emit('on-change', item)
                    }
                })
            }
        },
        created () {
            this.options.forEach((item, index) => {
                this.showList[index] = true
                if (item[this.itemKey] === this.value) {
                    this.val = item[this.itemValue]
                    this.showList[index] = false
                }
            })
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .v-dropdown
        cursor pointer
        display inline-block
        .el-dropdown
            width 100%
            height 100%
            button
                outline none
                border none
            .el-dropdown-selfdefine:hover
                background #A1CFFF
            .el-dropdown-selfdefine:active
                background #3A7CC1
            .el-dropdown-selfdefine
                text-align left
                display inline-block
                height 100%
                width 100%
                line-height 1
                color #fff
                background #409EFF
                padding 0 10px
                position relative
                .el-icon-arrow-down
                    position absolute
                    right 10px

    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover
        background-color #f5f7fa
        color #5a5e66
</style>
